import React, { Component } from "react";
import { NavBar, Icon, SearchBar } from "antd-mobile";
import "./SearchCenter.scss";
import {getHomeSearchGoods} from "../../data/api";
import {withRouter} from "react-router-dom";
class SearchCenter extends Component {
  state = {
    goodsList: [
    //   {
    //     goods_id: 47589,
    //     goods_name:
    //       "三打两建sdfsdfsfsdfsdfsfsfsdfsfsfsfsfsfsfsfsfsfsfsfsfsdfsfs非公安虽然他",
    //   },
    //   {
    //     goods_id: 47590,
    //     goods_name: "三打两建sdfssfd然他",
    //   },         
    //         --------搜索页---------------- 
    ],
    active: ">",
  };

  valid = true; // 标识上次事件是否已经完成
  throttle = (fn, timeout) => {
    // 上次事件已经执行完毕
    if (this.valid) {
      this.valid = false; // 设置定义器
      setTimeout(()=> {
        fn.call(this); // 执行回调函数
        this.valid = true;
      }, timeout);
    }
  };
  debounce = (fn, time) => {
    if (this.timeId) {
      clearTimeout(this.timeId);
      this.timeId = null;
    }
    this.timeId = setTimeout(fn, time);
  };
  handleChange=(value) => {

      this.throttle(async ()=>{
          let res =await getHomeSearchGoods({
              query:value
          });
          let ress=res.message.goods
        //   console.log(ress)
        this.setState({
            goodsList:ress
        })
      },500)
  }
  //跳转到详情
  handleItemClick=(goods_id) => {
      this.props.history.push("GoodDatail/"+goods_id)
  }
  
  render() {
    return (
      <div>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => this.props.history.go(-1)}
          style={{width:60}}
        ></NavBar>
        <SearchBar placeholder="请输入商品" cancelText="搜索" onChange={this.handleChange}
        />

        <div className="goodsList">
          {this.state.goodsList.map((v, i) => {
            // console.log(v);
            return (
              <div className="goodsItem" key={v.goods_id} onClick={this.handleItemClick.bind(this,v.goods_id)}>
                <div className="goodsListItem" key={v.goods_id}>
                  {v.goods_name}
                </div>
                <div className="goodsGo" key={i}>
                  {this.state.active}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
export default withRouter(SearchCenter)
